<template>
  <div class="home-container flex-col">
    <div class="nav-bar">
      <div class="nav-status" :style="{height:statusH + 'px'}"></div>

      <div class="nav-head">
        <div class="nav-content flex-row-space-between">
          <img src="/static/assets/img/icon/icon-arrow-left.png" class="icon-back" @click="onClickBack"/>
          <div class="flex-col-v-center title">{{title}}</div>
          <div class="icon-back"></div>
        </div>
      </div>
    </div>

    <div class="table-container flex-col" :style="{'padding-top':titleH + statusH + 'px'}">
      <div class="h-10"></div>
      <div class="content-box">
        <div class="article-box" v-if="postList.length">
          <div class="article-item flex-row" v-for="item in postList" :key="item.id" @click="goToPostDetail(item.id)">
            <img :src="item.coverImg"/>
            <div class="flex-1 flex-col">
              <div class="title">
                {{item.title}}
              </div>
              <div class="content">
                {{item.content}}
              </div>
            </div>
          </div>
          <div class="more flex-center" v-if="!noPostPostStatus">
            <span class="more-txt" @click="_getPostList(postLimit + 100)">查看更多></span>
          </div>
        </div>
        <div class="goods-box">
          <div class="top flex-row-v-center">
            <div class="line"></div>
            <div class="right">呼吸药物</div>
          </div>
          <div class="bottom">
            <div class="goods-item" v-for="item in goodsList" :key="item.id" @click="onTapGoodsDetail(item)">
              <img :src="item.coverImg">
              <div class="desc-box">
                <div class="label">{{item.label_name}}</div>
                <div class="name">{{item.name}}</div>
                <div class="price-box flex-row">
                  <div class="price-txt">¥{{item.processPrice}}</div>
                  <div class="original-price-txt">¥{{item.processGuidePrice}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import global from "global";
  import Core from "core";
  import Common from "common";

  export default {
    data () {
      return {
        statusH: global.state.statusH,
        titleH: global.state.titleH,
        goodsList: [],
        currentPage: 1,
        totalPage: 1,
        noMoreDataStatus: '',
        postList: [],
        noPostPostStatus: '',
        category: '',
        title: '呼吸药物',
        postLimit: 2,
      }
    },

    onShow() {
      this.category =  this.$root.$mp.query['category']
      this.title = this.category == 1 ? '呼吸药物' : '呼吸器械';
      this._getGoodsList ("", 1)
      this._getPostList(2)
    },

    onReachBottom() {
     this._getNextPageList();
    },

    methods: {

      goToPostDetail (postId) {
        Common.go(`/pages/疾病知识/详情/main?post_id=${postId}`)
      },

      onTapGoodsDetail (item) {
        Common.go('/pages/产品中心/详情/main?goods_id=' + item.id)
      },

      onClickBack () {
        Core.Util.goBack()
      },

      _getNextPageList() {
        if (this.noMoreDataStatus) {
          return;
        }
        let page = this.currentPage + 1;
        this._getGoodsList('', page)
      },

      _getGoodsList (name, page) {
        wx.showLoading({ title: '获取中' })
        Core.Api.Goods.goodsList(name, page, this.category)
          .then(res => {
            let goodsList = res.goods_list

            goodsList.forEach(v => {
              v.processPrice = Core.Util.processMoney(v.price)
              v.processGuidePrice = Core.Util.processMoney(v.guide_price)
              v.processExpressFee = Core.Util.processMoney(v.express_fee)
              v.coverImg = Core.Util.getImgUrl(v.cover_img)
            })
            if (page === 1) {
              this.goodsList = res.goods_list
            } else {
              this.goodsList = this.goodsList.concat(res.goods_list)
            }
            this.currentPage = page
            this.totalPage = Math.ceil(res.count / 10)

            if (this.totalPage === 0 || this.totalPage === this.currentPage) {
              this.noMoreDataStatus = true
            }

            wx.hideLoading()
          })
          .catch(err => {
            Core.Util.showTip('', err.message)
          })
      },

      _getPostList(limit) {
        Core.Api.Post.postListByCategory(this.category, 1, limit).then(res => {
          let list = res.post_list;
          let total = res.count;
          list.forEach(v => {
            v.coverImg = Core.Util.getImgUrl(v.cover_img)
            v.content = Core.Util.getNoHtmlText(v.content, 25)
          })
          this.noPostPostStatus = total <= limit;
          this.postLimit = limit;
          this.postList = list;
        }).catch(err => {
          Core.Util.showTip('', err.message)
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .home-container {
    background: #f9f9f9;
    position: relative;
    width: 100%;
    height: 100%;

    .nav-bar {
      background: #ffffff;
      .nav-content {
        padding: 10px 12px;
        position: relative;
        z-index: 1;

        .icon-back {
          width: 20px;
          height: 20px;
        }

        .title {
          height: 18px;
          font-size: 19px;
          line-height: 20px;
          color:rgba(49,49,49,1);
        }
      }
    }

    .h-10 {
      height: 10px;
      background: #f5f5f5;
    }

    .table-container {
      width: 100%;
      height: 100%;
      background: #ffffff;

      .content-box {
        padding: 0 14px;
        background: #ffffff;
        .article-box {
          .article-item {
            padding: 21px 0;
            border-top: 1px solid rgba(0,0,0,0.07);
            img {
              width: 127px;
              height: 96px;
              margin-right: 15px;
            }
            .title {
              font-size:16px;
              color:rgba(49,49,49,1);
            }
            .content {
              font-size:14px;
              color:rgba(147,147,147,1);
            }
            &:first-child {
              border-top: none;
            }
          }
          .more {
            padding-bottom: 21px;
            border-bottom: 1px solid rgba(0,0,0,0.07);
            .more-txt {
              font-size:14px;
              color:rgba(147,147,147,1);
            }
          }
        }

         .goods-box {
           .top {
             padding: 18px 0;
             .line {
               width:3px;
               height:13px;
               background:rgba(13,197,169,1);
               margin: 0 5px;
             }
             .right {
               padding: 0 6px;
               font-size: 16px;
               color:rgba(49,49,49,1);
             }
           }
           .bottom {
             .goods-item {
               display: inline-block;
               font-size: 0;
               width: 158px;
               padding-bottom: 21px;
               img {
                 width: 158px;
                 height: 132px;
                 background: #333;
               }
               .desc-box {
                 margin-top: 12px;
                 .label {
                   display: inline-block;
                   padding: 0 2px;
                   height: 14px;
                   line-height: 14px;
                   background:rgba(14,197,169,1);
                   border-radius:3px;
                   font-size:9px;
                   color:rgba(255,255,255,1);
                   text-align: center;
                 }
                 .name {
                   font-size:14px;
                   color:rgba(147,147,147,1);
                 }
                 .price-box {
                   align-items: baseline;
                   .price-txt {
                     font-size:14px;
                     line-height: 14px;
                     color:rgba(255,65,65,1);
                   }
                   .original-price-txt {
                     font-size:10px;
                     line-height: 10px;
                     text-decoration:line-through;
                     color:rgba(147,147,147,1);
                     margin-left: 6px;
                   }
                 }
               }
               &:nth-child(2n + 1) {
                 margin-right:31px;
               }
             }
           }
         }
      }
    }
  }
</style>
